import React from 'react';
import MenuItem from 'material-ui/lib/menus/menu-item';
import Divider from 'material-ui/lib/divider';
import ArrowDropRight from 'material-ui/lib/svg-icons/navigation-arrow-drop-right';
import MenuIcon from 'material-ui/lib/svg-icons/navigation/menu';

import { Link } from 'react-router';

import * as MenuStyle from './Menu.less';
import cx from 'classnames';

const LinkStyle = cx(MenuStyle.color_black, MenuStyle.full);

export default class Menu extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div className={MenuStyle.menu}>
				<MenuItem primaryText='导航' disabled={true} rightIcon={<MenuIcon />} />
				<Divider />
				<MenuItem primaryText='数据概况' rightIcon={<ArrowDropRight />} menuItems={[
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">用户数据</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">活跃数据</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">留存数据</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">作业数据</a>
						</MenuItem>
					]}  />
				<MenuItem primaryText='使用缝隙' rightIcon={<ArrowDropRight />} menuItems={[
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">老师行为</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">学生行为</a>
						</MenuItem>
					]} />
				<MenuItem primaryText='用户分析' rightIcon={<ArrowDropRight />} menuItems={[
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">老师属性</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">学生属性</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">布置作业老师分布</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">新增注册用户数对比</a>
						</MenuItem>,
						<MenuItem>
							<a className={MenuStyle.color_black} href="javascript:void(0)">科目对比</a>
						</MenuItem>
					]} />
				<MenuItem primaryText='活跃分析' rightIcon={<ArrowDropRight />} menuItems={[
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>活跃用户构成</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>教师新鲜度</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>学生新鲜度</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>布置作业新鲜度</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>提交作业新鲜度</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>新建班群学生数转化度</a>
						</MenuItem>
					]} />
				<MenuItem primaryText='布置作业-老师-题目' rightIcon={<ArrowDropRight />} menuItems={[
						<MenuItem>
							<Link to='/app/FixupWorkNewTrend' className={LinkStyle}>新增趋势</Link>
						</MenuItem>,
						<MenuItem>
							<Link to='/app/FixupWorkCumulativeTrend' className={LinkStyle}>累积趋势</Link>
						</MenuItem>,
						<MenuItem>
							<Link to='/app/FixupWorkSubjectDistribution' className={LinkStyle}>科目分布</Link>
						</MenuItem>,
						<MenuItem>
							<Link to='/app/FixupWorkAreaDistribution' className={LinkStyle}>地域分布</Link>
						</MenuItem>,
						<MenuItem>
							<Link to='/app/FixupWorkSubmissionRate' className={LinkStyle}>布置作业提交率(按截止日期)</Link>
						</MenuItem>,
						<MenuItem>
							<Link to="/app/FixupWorkQuestionsDistribution" className={LinkStyle}>布置作业题目题型分布</Link>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>布置作业老师新鲜度分析</a>
						</MenuItem>
					]} />
				<MenuItem primaryText='提交作业-学生-题目' rightIcon={<ArrowDropRight />} menuItems={[
						<MenuItem>
							<Link to='SubmitWorkNewTrend' className={LinkStyle}>新增趋势</Link>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>累积趋势</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>科目分布</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>地域分布</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>提交作业题目题型分布</a>
						</MenuItem>,
						<MenuItem>
							<a href="javascript:void(0)" className={MenuStyle.color_black}>提交作业学生新鲜度分析</a>
						</MenuItem>
					]} />
			</div>
		);
	}
}